<template>
  <div class="wrap">
    <nav-bar :title="'活动专区-'+cateTitle">
      <!-- <img src="/img/47.png" slot="screen" class="nav-right" /> -->
    </nav-bar>
    <div class="privateGoods">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list
                :finished="finished"
                finished-text="没有更多了"
                @load="getGoods"
            >
                <product-item-long class="goodsItem" slot="tabItem" v-for="(vo, index) in list" :key="'pro_'+index" :product="vo"></product-item-long>
            </van-list>
        </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import sideMenu from "@/components/side-menu";
import tabs from "@/components/tabs";
import productItemLong from "@/components/product-item-long";
import { List, PullRefresh } from "vant";
Vue.use(List).use(PullRefresh);
export default {
  name: "activity",
  data() {
    return {
      loading: false,
      prom:{},
      list: [],
      page: {
        nowPage: 0
      },
    };
  },
  mounted(){
    // this.getList()
  },
  computed: {
    finished(){
        if(this.page.totalPages && this.page.totalPages <= this.page.nowPage) {
            return true
        }
        return false
    },
    cateTitle(){
      return this.prom && this.prom.title ? this.prom.title : (this.$route.query.title || '')
    },
    activityId(){
      return this.$route.query.cid || 0
    }
  },
  watch:{
    activityId(){
      this.list = [],
      this.page = {
        nowPage: 0
      }
      this.getGoods()
    }
  },
  methods: {
    getGoods(){
      this.loading = true
      this.$store.dispatch('activity_goods', {
        p: this.page.nowPage + 1,
        cid: this.activityId,
      }).then(res => {
        this.list = this.list.concat(res.data.result.list)
        this.page = res.data.result.page
        this.prom = res.data.result.prom
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    onRefresh(){
        this.list = []
        this.page = {
            nowPage: 0
        }
        this.getGoods()
    }
  },
  components: {
    navBar,
    sideMenu,
    tabs,
    productItemLong
  }
};
</script>
<style lang="less" scope>
.wrap {
  height: 100%;
  width: 100%;
}
.nav-right {
  height: 20px;
  width: 20px;
}
.privateGoods {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  width: 345px;
  margin: 0 auto;
  .van-pull-refresh{
      width: 100%;
  }
  .tabs {
    width: 100%;
    height: 45px;
    background-color: #fff;
    .goodsItem{
      width: 270px;
    }
    .van-tabs__line {
      background-color: #fff;
    }

    .van-tab {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      &.van-tab--active {
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 124, 157, 1);
      }
    }
  }
}
</style>


